<template>
<el-card class="card-B">
    <div class="text_item">
        <div v-for="item in digital"
             class="item" @click="showDetails(item)"
             :style="{'color': item.color !== '' ? item.color : 'black'}"
        >
            <span >{{item.label}}</span>
            <span style="margin-top: 10px">{{item.value}}</span>
        </div>
    </div>
</el-card>
</template>

<script setup>
import {h, onMounted, reactive, ref} from "vue";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
import {getAllTasks} from "@/request/api";
import {ElMessage} from "element-plus";

const store = useStore();
const router = useRouter();
const digital = ref ([
    {
        label:'所有工单',
        name:'AllTasks',
        value:0,
        span:1,
        display:true,
        color: '#FFCC00'
    },
    {
        label:'已完成',
        name:'FinishedTasks',
        value:0,
        span:1,
        display:true,
        color: ''
    },
    {
        label: '处理中',
        name:'DoingTasks',
        value: 0,
        span: 1,
        display: true,
        color: ''
    },
    {
        label: '待处理',
        name:'WaitingTasks',
        value: 0,
        span: 1,
        display: true,
        color: ''
    },
    {
        label: '我的',
        name:'MineTasks',
        value: 0,
        span: 1,
        display: true,
        color: ''
    }
])
const data = reactive({
    summaryData:{
        state: '工单',

    }
})
onMounted(async () => {
    console.log('tabsView - mounted')


    // 更新一下订单的数量
    // console.log(store.state.taskLength)
    let l = store.state.taskLength
    digital.value[0].value = l.all
    digital.value[1].value = l.finished
    digital.value[2].value = l.doing
    digital.value[3].value = l.submitted
    digital.value[4].value = l.mine
})
function showDetails(item) {
    //消息
    ElMessage({
        message: h('p', null, [
            h('span', null, item.label)
        ]),
    })
    // console.log(item)

    //更改被点击的标签的颜色
    item.color = '#FFCC00'

    // console.log(digital.value)
    digital.value.forEach((i)=>{
        // console.log(i)
        if(item !== i){
            // console.log('yes')
            i.color = ''
        }
    })

    //要么跳转到子页面
    router.push({name:item.name})

    //要么筛选工单，分开显示各种工单
}
</script>

<style scoped>
.card-B{
    width: 100%;
    margin-bottom: 3%;
    border-radius: 3%;
}
.text_item{
    width:100%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.item{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
</style>